<!--
/**
* Author: tt
* Date: 2023年5月30日10:30:41
* Desc: 新人礼包
*/
-->
<template>
  <zm-popup
    class="newcomer"
    v-model="show"
    @close="close"
    mode="center"
    :closeable="false"
    :round="9"
    bg-color="transparent"
  >
    <view class="main">
      <view
        class="image"
        :style="{
          backgroundImage: 'url(' + image + ')'
        }"
        @click="toLogin"
      ></view>
      <view class="close" @click="close"></view>
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: '',
    components: {
      ZmPopup
    },
    data() {
      console.log('image', this.image)
      return { couponType: '1' }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      image: {
        type: String,
        default: ''
      }
    },
    computed: {
      show: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      close() {
        this.$emit('input', false)
      },
      toLogin() {
        this.$tools.navigateTo('/pages/login/index')
        this.close()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .newcomer {
    background-color: transparent !important;
  }
  .main {
    height: auto;
    width: 660rpx;
    padding: 25rpx;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    .image {
      height: 750rpx;
      background-image: url(https://public-oss-file.zmaxfilm.com/applet/img/my/register-image.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .close {
      position: absolute;
      top: 0rpx;
      right: 30rpx;
      width: 50rpx;
      height: 50rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/close.png)
        no-repeat;
      background-size: 100%;
    }
  }
</style>
